<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
<script>
    var length = 10;
    function fn() {
        console.log(this.length);               //10  ,   2
    }
    var obj = {
        length: 5,
        method: function(fn) {
            fn();
            arguments[0]();
        }
    };
    obj.method(fn, 1);

    /*************
     * 全局函数fn同时也属于arguments数组中的一员，即当作为arguments成员之一调用的时候,
     * 其作用域就绑定到了arguments上，this也就是指向了arguments对象，
     * 所以arguments[0]()这段代码调用了身为成员的fn()函数，
     * this.length就等于是arguments.length，又因为method传入的参数为2个，所以最后输出2。
     ---------------------

     * ************/



    /*******************/

    var length = 10;
    function fn() {
        console.log(this.length);             //5
    }
    var obj = {
        length: 5,
        method: function() {
            fn.call(this);
        }
    };
    obj.method();



    //1.
    var name = "caibaojian.com";
    var person = {
        name: "kang",
        pro: {
            name: "Michael",
            getName: function() {
                return this.name;
            }
        }
    };
    console.log(person.pro.getName());
    var pepole = person.pro.getName;
    console.log(pepole());


    //2.
    var name = "caibaojian.com";
    var person = {
        name: "kang",
        pro: {
            name: "Michael",
            getName: function() {
                console.log(this);
                return this.name;
            }
        }
    };
    console.log(person.pro.getName());
    var pepole = person.pro.getName;
    console.log(pepole());

    //3.
    'use strict';
    var name = "caibaojian.com";
    var person = {
        name: "kang",
        pro: {
            name: "Michael",
            getName: function() {
                console.log(this);
                return this.name;
            }
        }
    };
    console.log(person.pro.getName());
    var pepole = person.pro.getName;
    console.log(pepole());

    //4.
    var name = "caibaojian.com",
        person = {
            name : "kang",
            getName : function(){
                return function(){
                    return this.name;
                };
            }
        };

    console.log(person.getName()());

    //3、原型链中的this
    var o1 = {
        f:function () {
            return this.a + this.b;
        }
    };
    var p = Object.create(o1);
    p.a = 1;
    p.b = 2;
    console.log(p.f());  //p上面的f是通过继承Object.create(o1)返回{}上面的原型



    //call和apply
    function add(c, d){
        return console.log(this.a + this.b + c + d);
    }

    var obj = {
        a: 1,
        b: 3
    };

    add.call(obj, 5, 7); // 1 + 3 + 5 + 7 = 16
    add.apply(obj, [10, 20]); // 1 + 3 + 10 + 20 = 34

 //
    // 获取文档中的所有元素的列表
    var elements = document.getElementsByTagName('*');

    for(var i = 0; i < elements.length; i++){
        // 当元素被点击时，就会变成蓝色
        elements[i].addEventListener('click', function (e) {
            e.stopPropagation();
            console.log(this);
            console.log(e.currentTarget);
            console.log(e.target);
            // 上面3个值是一样的
            this.style.backgroundColor = '#A5D9F3';
        });
    }

</script>
</html>